<template>
<!-- Home里的编辑推荐里的歌单点击进去的页面里的每一首歌 -->
  <li class="music_item" :class="{ current: item.id === currentPlaySongId }">
    <span class="order">{{ order }}</span>
    <div class="song_media">
        <div class="name">{{ item.name }}</div>
      <div class="album">
        <span
          class="artist"
          v-for="(artist,index) in (item.ar || item.song.album.artists)"
          :key="index"
          >{{ artist.name }}
        </span>
        <span>{{ item.song ? item.song.album.name : item.al.name }}</span>
      </div>
    </div>
    <div class="play">
      <div class="startPlay"></div>
      <div class="box">
        <div class="stopPlay" :class="{playing: playing}">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: ['item','order','currentPlaySongId','playing']
};
</script>

<style lang='less' scoped>
@keyframes loading {
  from {
    // height: 20%;
    transform: translateY(50%) scaleY(0.2);
  }
  to {
    // height: 100%;
    transform: translateY(50%) scaleY(1);
  }
}
.current{
  .startPlay{
    display: none !important;
  }
  .box{
    display: block !important;
      .playing{
        span{
          animation-play-state: running !important;
        }
      }
  }
}

.music_item {
  height: 54px;
  display: flex;
  border-bottom: 1px solid #efefef;
  align-items: center;
  .order{
      width: 40px;
      text-align: center;
  }
  .play {
    width: 44px;
    height: 44px;
    .startPlay{
      width: 100%;
      height: 100%;
      background: url("../assets/images/index_icon_2x.png") no-repeat -48px 0;
      transform: scale(0.5);
    }
    .box{
      width: 100%;
      height: 100%;
      display: none;
    }
    
    .stopPlay{
        margin: auto;
        display: none;
        display: flex;
        height: 50%;
        width: 50%;
        justify-content: space-between;
        span {
          width: 20%;
          height: 100%;
          transform: translateY(50%);
          display: block;
          background: red;
          animation: loading 0.9s linear infinite alternate;
          animation-play-state: paused;
          transform-origin: bottom;
          &:nth-child(1) {
            animation-delay: -0.6s;
          }
          &:nth-child(2) {
            animation-delay: -0.3s;
          }
        }
      }
  }
  .song_media {
    flex: 1;
    .name{
        display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .album {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 12px;
      color: #888;
      line-height: 17px;
      .SQ {
        display: inline-block;
        background: url("../assets/images/index_icon_2x.png") no-repeat 0 0;
        transform: scale(0.5);
        width: 24px;
        height: 16px;
        transform-origin: left center;
        vertical-align: bottom;
      }
      .artist {
        //   background-color: pink;
        &::after {
          margin: 0 5px;
          content: "/";
        }
        &:last-of-type{
            background-color:red;
          &::after {
            content: "-";
          }
        }
      }
      /* .artist:last-of-type{
          background-color:red;
      } */
    }
  }
}
</style>